<script setup>
import { onMounted, onUnmounted } from "vue";
import router from "@/router/index";
import { _$, $, to } from "./index";

onMounted(() => {
  $.onSearch();
});

onUnmounted(() => {
  $.clean();
});
</script>

<template>
  <el-carousel height="400px" width="100%" class="w-fill" >
      <el-carousel-item>
        <img src="../../../assets/imgs/1.png" style="width:100%">
      </el-carousel-item>
      <el-carousel-item>
        <img src="../../../assets/imgs/2.png" style="width:100%">
      </el-carousel-item>
      <el-carousel-item>
        <img src="../../../assets/imgs/3.png" style="width:100%">
      </el-carousel-item>
    </el-carousel>
  <el-space direction="vertical" fill wrap class="w-fill" style="margin-top: 20px;" :size="20">
    <div style="display: flex">
      <div style="flex: 2">
        <el-space direction="vertical" fill wrap class="w-fill" :size="20">
          <div style="font-weight: bold; margin-left: 20px; font-size: 18px;">推荐食谱</div>
          <div class="img-All">
            <div class="img-Array" @click="router.push('/portal/recipe/Detail?id=' + item.id)"  v-for="item in _$.query.responseParam.records">
              <img style=" cursor: pointer;" src="https://cp1.douguo.com/upload/caiku/e/a/a/400x266_ea7841a98f45d946e53fb3d392ff14ca.jpeg">
              <p style=" cursor: pointer;" >{{item.name }}</p>
            </div>
          </div>
        </el-space>
      </div>
      <div style="flex: 1; margin-left: 20px" class="rightClass">
        <el-space direction="vertical" fill wrap class="w-fill" :size="20">
          <div style="font-weight: bold; font-size: 18px;">最新资讯</div>
          <div v-for="item in _$.news.responseParam.records"
          style="  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);padding: 10px 20px;"
            :key="'recipe-card' + item.id">
            <div style="display: flex; justify-content: space-between">
                  <el-button
                    link
                    type="primary"
                    @click="router.push('/portal/news/detail?id=' + item.id)"
                  >
                    {{ item.title }}
                  </el-button>
                  <span
                    ><el-text type="info" size="small">资讯分类</el-text
                    ><el-tag size="small" style="margin-left: 10px">{{
                      item.typeName
                    }}</el-tag></span
                  >
                </div>
          </div>
        </el-space>
      </div>
    </div>
  </el-space>
</template>

<style scoped>
.el-main {
  padding: 0 !important;
}

:v-deep(.disabled .el-upload--picture-card) {
  display: none !important;
}

.custom-main-class {
  padding: 0;
}

.rightClass {
  height: 600px;
  overflow: auto;
}
.img-All {
  display:flex;
  flex-wrap: wrap;
  height: 600px;
  overflow: auto;
  >.img-Array {
    padding: 10px 20px;
    >img {
      width: 260px;
      height: 160px;
      border-radius: 10px;
    }
  }
}
</style>
